<template>
    <div class="MSubTable">
        <div v-for="(row,index) in curVal" class="subTable-center" :key="row.ID_?row.ID_:row.index_">
            <div class="MSubTable-number" @click="getLaunch(row.ID_?row.ID_:row.index_)">
                <view class="sub-launch" :style="[!launchId.contains(row.ID_?row.ID_:row.index_)?'transform: rotate(90deg)':'']"><my-icon size="0.9rem" type="icon-jiantou_liebiaoxiangyou"></my-icon></view>
                <span style="flex: 1">{{$i18(metadata.name)}}{{ index + 1 }}</span>
                <my-icon v-if="!readOnly && buttonPermission['delete']" @click.stop="subDelete(index)"
                         class="MSubTable-delete" type="icon-icon-test26"></my-icon>
            </div>
            <template v-if="!launchId.contains(row.ID_?row.ID_:row.index_)">
                <div v-for="(item,index) in metadataChildren" :key="index" style="margin-top: 0.5rem">
                    <MSubTableName :item="item" :row="row" :readOnly="readOnly" typeName="SubTable"></MSubTableName>
                </div>
            </template>
        </div>
        <div class="sub-empty" v-if="curVal.length==0">
            <image class="sub-empty-img" src="@/static/empty.png"/>
            <span class="sub-empty-name">{{i18n('noAnyData','暂无数据')}}</span>
        </div>
    </div>

    <div class="MSubTable-button" v-if="typeof readOnly === 'boolean'? !readOnly : true">
        <rx-button-list :localButtons="showButtonData" @change="handMethod" label="name"></rx-button-list>
    </div>
</template>

<script>
/*
子表控件
 */
import Util from "@/js/Util.js";
import SubTable from "./SubTable.js"
import MForm from '../js/MForm'
import SubTableButton from './SubTableButton'
import MSubTableName from './MSubTableName'
export default {
    name: "MSubTable",
    mixins: [SubTable,MForm,SubTableButton],
    props: ['readOnly'],
    components:{
        MSubTableName
    },
    data() {
        return {
            //控件属性
            metadataChildren: this.metadata.children,
            //子表标识
            subKey: this.metadata.field,
            buttonData: [],//子表按钮
            curVal:[],
            globalConfig: {},
            launchId:[],
        }
    },
    created() {
        let deleteList = ['delete', 'upMove', 'downMove', 'fullScreen',"excelImport","excelExport"];
        this.buttonData = [];
        if(this.metadata.control.launch===false &&  this.value){
            this.value.forEach(res=>{
                this.launchId.push(res.ID_?res.ID_:res.index_)
            })
        }
        this.metadata.buttonConfig.buttonData.forEach((res) => {
            if (!deleteList.includes(res.method) && this.buttonPermission[res.key]) {
                this.buttonData.push(res)
            }
        })
        this.globalConfig =  uni.getStorageSync('globalConfig') ;
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"componentsLang",key);
        },
        geStyle(){
            let style={}
            if(this.globalConfig.layout=='horizontal'){
                style = {
                    textAlign:this.globalConfig.align,
                    width:this.globalConfig.labelWidth,
                    margin:'0.5rem 0.5rem 0rem 0.5rem',
                }
            }
            return style
        },
        subDelete(index) {
            this.curVal.splice(index, 1);
        },
        //子表添加
        add() {
            let initData = this.data.initData[this.subKey];
            let row = JSON.parse(JSON.stringify(initData));
            row.index_ = Util.randomId();
            this.curVal.push(row);
        },
        getLaunch(id){
            if(this.launchId.contains(id)){
                this.launchId.forEach((res,index)=>{
                    if(res==id){
                        this.launchId.splice(index,1)
                    }
                })
            }else {
                this.launchId.push(id)
            }
        }
    },
}
</script>

<style scoped>
.sub-launch{
    margin-right: 0.5rem;
    color: rgba(0, 0, 0, 0.65);
}
.rx-horizontal{
    display: flex;
}
.MSubTable{
    padding:0rem 0.4rem 0.4rem 0.4rem;
}
.MSubTable-delete {
    text-align: center;
    font-size: 1.2rem;
    color: rgba(255, 81, 81, 1);
}

.MSubTable-number {
    display: flex;
    align-items: center;
    margin-top: 0.5rem;
    line-height: 1.5rem;
}

.MSubTable-icon {
    width: 1.5rem;
    height: 1.5rem;
    background: rgba(66, 133, 244, 1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-right: 0.5rem;
}

.subTable-center {
    border-radius: 5px;
    padding: 0rem 0.5rem;
}

.MSubTable-button {
    margin-top: 0.5rem;
    padding:0rem 0.9rem 0.4rem 0.9rem;
}

.MSubTable-button >>> .rx-center {
    height: 2.5rem !important;
    padding: 0rem !important;
}

.MSubTable-button >>> .rx-name {
    height: 2rem !important;
}

.MSubTable-button >>> .rx-more-list {
    bottom: 2.5rem !important;
}

.sub-empty {
    height: 7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.sub-empty-img {
    height: 4rem;
    width: 8rem;
}

.sub-empty-name {
    font-size: 0.8rem;
    margin-top: 0.2rem;
    color: rgba(213, 221, 234, 1);
}
</style>
